<template>
  <div class="pad-content-box form-no-padding-box padding-top-20">
    <el-form label-width="130px" size="small" :model="searchParams">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="上报起始时间">
            <el-date-picker 
              v-model="searchParams.reportTime" 
              type="daterange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"> 
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合同编号" prop="primaryKey">
            <el-select v-model="searchParams.contractKey"  filterable placeholder="请选择" clearable>
              <el-option
                v-for="item in agreementList"
                :key="item.contractCode"
                :label="item.contractCode"
                :value="item.contractCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="租户">
            <el-input placeholder="请输入" v-model="searchParams.partnerName" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="营业额起止时间">
            <el-date-picker 
              v-model="searchParams.cycleTime" 
              type="daterange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"> 
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-button type="primary" size="small" class="f-right" @click="getSaleReportList">查询</el-button>
        <el-button type="primary" size="small"  class="f-right margin-right-10" @click="addSaleReport">新增</el-button>
        <el-button type="primary" size="small"   class="f-right" @click="out()">Excel导出</el-button>
      </el-col>
    </el-form>


    <el-table class="margin-top-20 has-tab-header-border new-table-style bold-scrollbar-table" border align="left"  :data="tableData" >
      <el-table-column  label="商铺名称" prop="rentInfoName" width="120"> </el-table-column>
      <el-table-column  label="客户名称" prop="partnerName" width="180"> </el-table-column>
      <el-table-column  label="合同编号" prop="contractCode" width="165"> </el-table-column>
      <el-table-column  label="商品分类" prop="categoryName" width="100"> </el-table-column>
      <el-table-column  label="营业额开始日期" width="135">
        <template slot-scope="scope">
          <span>{{ scope.row.cycleBeginTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="营业额结束日期" width="135">
        <template slot-scope="scope">
          <span>{{ scope.row.cycleEndTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="税前营业额" prop="operatingAmount" width="110"> </el-table-column>
      <el-table-column  label="税后营业额" prop="afterTaxOperatingAmount" width="110"> </el-table-column>
      <el-table-column  label="销售记录笔数" prop="saleNum" width="120"> </el-table-column>
      <el-table-column  label="上报人" prop="reportUserName" width="100"> </el-table-column>
      <el-table-column  label="上报日期" prop="type" width="120" > 
        <template slot-scope="scope">
          <span>{{ scope.row.reportTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="审核时间" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.processTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-if="total" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next"/>
    <el-dialog :visible.sync="showAddDialog" title="新增销售额上报信息" width="90%" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleClose">
      <saleReportAdd @closeDialog="closeDialog" ref="saleReportAdd" :agreementList="agreementList"></saleReportAdd>
    </el-dialog>
  </div>
</template>

<script>
  import { saleReprotList,saleReprotOut,apiBusinessContractList} from '../../api/salesReport';
  import saleReportAdd from './components/saleReportAdd.vue';
  export default {
    name: 'salesReport',
    components:{saleReportAdd},
    data() {
      return {
        searchParams:{},
        tableData:[],
        currentPage: 1,
        pageSize: 10,
        total:0,
        showAddDialog:false,
        agreementList:[]
      };
    },
    created() {
       this.getSaleReportList()
       this.getAgreementList()
    },
    methods: {
      //合同列表
      async getAgreementList(){
        let res = await apiBusinessContractList({
          projectKeys: [localStorage.getItem('projectKey')],
          contractStatusList: [2, 4, 5],
          status:1,
          spaceCodeList:[]
        })
        this.agreementList = res.rows
      },
      async getSaleReportList(more){
        let res = await saleReprotList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          contractKey:this.searchParams.contractKey || null,
          projectKeys:[localStorage.getItem('projectKey')],
          geReportTime:this.searchParams.reportTime?this.searchParams.reportTime[0]:null,
          leReportTime:this.searchParams.reportTime?this.searchParams.reportTime[1]:null,
          geCycleBeginTime:this.searchParams.cycleTime?this.searchParams.cycleTime[0]:null,
          leCycleEndTime:this.searchParams.cycleTime?this.searchParams.cycleTime[0]:null
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },
      //分页
      pageChange(page) {
        this.currentPage = page.currentPage
        this.getSaleReportList('more');
      },
      addSaleReport(){
        this.showAddDialog = true
      },
      closeDialog(data){
        this.showAddDialog = false
        if(data.success){
          this.getSaleReportList()
        }
      },
       //导出
      async out() {
        let res = await saleReprotOut({
          contractKey:this.searchParams.contractKey || null,
          geReportTime:this.searchParams.reportTime?this.searchParams.reportTime[0]:null,
          leReportTime:this.searchParams.reportTime?this.searchParams.reportTime[1]:null,
          geCycleBeginTime:this.searchParams.cycleTime?this.searchParams.cycleTime[0]:null,
          leCycleEndTime:this.searchParams.cycleTime?this.searchParams.cycleTime[0]:null
        })
        window.location.href = res.url
      },
      handleClose(){
        this.$refs.saleReportAdd.closeDialog({success:false})
      }
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
  ::v-deep .cell{
    text-align: center;
  }
</style>
